<template>
  <div>
    <div style="margin-bottom: 24px">
      <div style="display: inline-block">
        <a-button
          type="primary"
          icon="plus"
          @click="handleAdd"
        > 新增策略 </a-button>
      </div>
    </div>

    <a-table
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      >
      <span
        slot="sortCol"
        slot-scope="text, record, index"
      >
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>

        <span
          slot="action"
          slot-scope="text, record"
        >
          <a-button type="primary" icon="edit" size="small" @click="handleUpdate(record)">编辑</a-button>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record)"
          >
            <a-button type="danger" icon="delete" size="small">删除</a-button>
          </a-popconfirm>
          <template v-if="!record.enable">
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定启用吗?"
              @confirm="() => handleStatusChange(record)"
            >
              <a-button type="primary" icon="check-circle" size="small">启用</a-button>
            </a-popconfirm>
          </template>
          <template v-if="record.enable">
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定禁用吗?"
              @confirm="() => handleStatusChange(record)"
            >
              <a-button type="danger" icon="close-circle" size="small">禁用</a-button>
            </a-popconfirm>
          </template>
        </span>
    </a-table>
    <update-modal
      ref="updateModal"
      @ok="() => loadData()"
    />
    <add-modal
      ref="addModal"
      @ok="() => loadData()"
    />
  </div>
</template>

<script>
  import {
    GwListMixin
  } from '@/mixins/GwListMixin'
  import {
    gPostAction
  } from '@/api/manage'
  import AddModal from './modules/policy/AddModal'
  import UpdateModal from './modules/policy/UpdateModal'

  export default {
    name: 'Policy',
    mixins: [GwListMixin],
    components: {
      AddModal,
      UpdateModal,
    },
    data() {
      return {
        // 表头
        columns: [{
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: '策略名称',
          width: 200,
          dataIndex: 'policyName',
        },
        {
          title: '状态',
          dataIndex: 'enable',
          customRender: function (t, r, index) {
            return t ? '启用' : '禁用'
          },
        },
        {
          title: '添加时间',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          width: 250,
          dataIndex: 'action',
          scopedSlots: {
            customRender: 'action'
          },
        }, ],
        url: {
          list: '/policy/page',
          update: '/policy/update1',
          delete: '/policy/delete',
        },
        formLayout: "inline",
      };
    },
    mounted() {
      this.loadData()
    },
    methods: {
      loadData() {
        this.gQueryParam.resourceType = "environment";
        this.gQueryParam.title = "精确管控与供电制冷联动-供电制冷最优模型-供电制冷设备告警管理-告警阈值设置";
        this.gQueryParam.content = "查询告警阈值设置列表";
        gPostAction(this.url.list, this.gQueryParam).then(
          (res) => {
            const data = res.data;
            if (data && data.list) {
              this.gDataSource = data.list;
              this.gPagination.total = data.totalCount;
            }
          })
      },
      handleUpdate(data) {
        this.$refs.updateModal.update(data)
      },
      handleAdd() {
        this.$refs.addModal.add()
      },
      handleStatusChange(data) {
        const params = {
          title: "精确管控与供电制冷联动-供电制冷最优模型-供电制冷设备告警管理-告警阈值设置",
          policyId: data.id,
          enable: !data.enable,
        };
        gPostAction(this.url.update, params)
          .then((res) => {
            if (res.success) {
              this.$message.success("操作成功");
            }
          })
          .finally(() => {
            this.loadData();
          });
      },
      handleDelete(data) {
        const params = {
          title: "精确管控与供电制冷联动-供电制冷最优模型-供电制冷设备告警管理-告警阈值设置",
          policyId: data.id,
        };
        gPostAction(this.url.delete, params)
          .then((res) => {
            if (res.success) {
              this.$message.success("操作成功");
            }
          })
          .finally(() => {
            this.deleteCallBack();
          });
      },
    },
  };
</script>
